<extend name="desktop_default/template/base_index2" />

<block name="area_header">

	<style type="text/css">
        body{
            background: #FFFfff;
        }
        .shop-container{
            width: 990px;
        }
        i.hot{
            background: url(__IMG__/index/hot.png);
            width: 32px;
            height: 39px;
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .pinpai{
            margin-top: 20px;
            margin-bottom: 80px;
        }
        .quick-nav{
            list-style-type: none;
        }
        .quick-nav li{
            width: 70px;
            height: 47px;
            background: url(__IMG__/index/xuanfuyou.png) ;
        }
        .flash-sales-goods{
        }
        .quick-nav li a{
            height: 47px;
            display: block;
        }
        .quick-nav li.qq{
            background-position: 0px 0px;
            -moz-transition: background-position 0.5s ease-in;
            -webkit-transition: background-position 0.5s ease-in;
            -o-transition: background-position 0.5s ease-in;
            transition: background-position 0.5s ease-in;
        }
        .quick-nav li.qq:hover{
            background-position: -70px 0px;
        }
        .quick-nav li.cart{
            background-position: 0px -138px;
            -moz-transition: background-position 0.5s ease-in;
            -webkit-transition: background-position 0.5s ease-in;
            -o-transition: background-position 0.5s ease-in;
            transition: background-position 0.5s ease-in;
        }
        .quick-nav li.cart:hover{
            background-position: -70px -138px;
        }
        .quick-nav li.top{
            background-position: 0px -185px;
            -moz-transition: background-position 0.5s ease-in;
            -webkit-transition: background-position 0.5s ease-in;
            -o-transition: background-position 0.5s ease-in;
            transition: background-position 0.5s ease-in;
        }
        .quick-nav li.top:hover{
            background-position: -70px -185px;
        }
        .zhaocai{
            background: url(__IMG__/index/zhaocai.png) no-repeat;
            width: 200px;
            height: 230px;
            display: block;
            top: 30px;
            position: absolute;
            left: -200px;
        }
        .ting{
            background: url(__IMG__/index/ting.png) no-repeat;
            width: 168px;
            height: 56px;
            display: block;
            top: 30px;
            position: absolute;
            right: -168px;
        }
        .fangzi{
            background: url(__IMG__/index/fangzi.png) no-repeat;
            width: 240px;
            height: 247px;
            display: block;
            top: 400px;
            position: absolute;
            right: -240px;
        }
        .banma-logo{
            background: url(__IMG__/index/logo.png) no-repeat;
            width: 49px;
            height: 49px;
            left: 10px;
            top: 10px;
            position: absolute;
            display: block;

        }
        .item-boxshadow{
            box-shadow: 0px 0px 2px 2px #CABCBC;
        }
	</style>
	<script type="text/javascript" src="__JS__/sco.countdown2.js"></script>
</block>

<block name="area_body">

	<header class="header">
		<include file="desktop_default/width/top" />
	</header>

    <div class="am-slider am-slider-default" data-am-flexslider="{animation: 'slide', slideshow: true }" id="demo-slider-0">
        <ul class="am-slides">
            <volist name="banners" id="b">
                <li data-transition="boxfade" data-slotamount="5" data-masterspeed="300">
                    <img onclick="toUrl(this)" src="{:C('SITE_URL')}{$b['path']}" data-url="{:C('SITE_URL')}{$b['url']}" alt=""  style="cursor: pointer;">
                </li>
            </volist>
        </ul>
    </div>


	<div class="shop-container am-container" >

        <img src="__IMG__/hh.png"  alt="极速清关" class="am-text-center am-img-responsive" />

        <!-- 活动商品 -->
		<div class="flash-sales-goods am-cf">
                <div class="zhaocai"></div>
            <div class="ting"></div>
            <div class="fangzi"></div>
				<volist name="flash_sales" id="fs">
					<div class="goods-item am-padding-sm am-u-lg-12 am-u-md-12" >
                        <div class="item-left am-fl am-text-center">

                            <a href="{:U('Shop/Product/detail',array('id'=>$fs['id']))}">
                                <i class="banma-logo"></i>
                                <img class="am-img-responsive am-center" style="height: 100%;"  src="{:U('Api/Picture/index',array('id'=>$fs['main_img']))}"  >
                            </a>
                        </div>


						<div class="item-right am-fl">
                            <!-- 产地国家与倒计时 -->
                            <div class="am-cf country-counter">
                                <div class="am-fl country-info" >
                                    <img style="width: 50px" src="__PUBLIC__/Common/img/country/by{$fs.dt_origin_country}.jpg" alt="国家图标">
                                    <span>{$fs.source}</span>
                                </div>

                                <div class="am-fl counter" >
                                    <i class="am-icon-clock-o am-margin-right-sm"></i>
                                    仅剩:&nbsp;&nbsp;
                                    <span class="div_time" data-until="{$fs.end_time}">

                                    </span>
                                </div>

                            </div>

                            <div class="name am-text-truncate">
                                {$fs.name}
                            </div>
                            <div class="synopsis ">
                                {$fs.synopsis}
                            </div>

                            <div class="bottom-price-btns">

                                <span class="price-group ">
                                    <span class="price-label" >包邮价 ￥<span class="price">{$fs.price}</span></span><br>
                                    <span class="am-link-muted am-text-xs">国内参考价：<del>￥{$fs.ori_price}</del>元</span>
                                </span>

                            </div>

                            <a class="am-btn btn-buy am-fr" href="{:U('Shop/Product/detail',array('id'=>$fs['id']))}">
                                购买
                            </a>

						</div>

					</div>
                </volist>

		</div>

        <!-- banner2张 -->
        <div class="am-cf">
            <div class="am-fl am-padding-right-xs " style="width: 50%">
                <a href="{:U('Shop/Index/search',array('type'=>'all'))}">
                    <img class="item-boxshadow am-img-responsive" style="width:100%" src="__IMG__/index/pin01.png">
                </a>
            </div>
            <div class="am-fl am-padding-left-xs"  style="width: 50%">
                <a href="{:U('Shop/Index/search',array('type'=>'all'))}">
                    <img class=" item-boxshadow am-img-responsive" style="width:100%"  src="__IMG__/index/pin02.png">
                </a>
            </div>
        </div>

        <!-- 热门商品 -->

		<div class="hot-goods am-cf">
            <div class="am-margin-bottom-sm  am-margin-top-sm">
                <img style="width:100%;" src="__IMG__/index/mrjx.png">
            </div>
            <div class="hot-list  am-margin-top-sm" >
            <volist name="hot" id="vo">
                <a  href="{:U('Shop/Product/detail',array('id'=>$vo['id']))}" title="{$vo['name']}" >
                <div class="am-padding-lg hot-item am-u-lg-3 am-u-md-3 am-fl " style="background-color: #FFFFFF;" >

                    <div class="pic">
                        <i class="hot"></i>
                        <img class="am-img-responsive" style="width:100%;" src="{:U('Api/Picture/index',array('id'=>$vo['main_img'],size=>480))}"   alt="{$vo['name']}" >
                    </div>

                    <div class="">
                        <span class="price" ><small>¥</small>{$vo['price']}</span>
                        <del class="ori-price">¥{$vo['ori_price']}</del>
                    </div>
                    <div class="name">
                        {$vo['name']}
                    </div>
                </div>
                </a>
            </volist>
            </div>
		</div>
        <!-- 热门商品 END -->

        <!-- 精选品牌 -->
        <div class="pinpai">

            <div class="am-margin-bottom-sm">
                <img style="width:100%;" src="__IMG__/index/jxpp.png" />
            </div>

            <div class="pinpai-show">
                <a href="{:U('Shop/Index/search',array('type'=>'all'))}"><img style="width:100%;" src="__IMG__/index/pinpai.png" alt="品牌"></a>
            </div>
        </div>
        <!-- 精选品牌 END-->

	</div>



    <div class="J_left_float" style="position: fixed;bottom:40px;">
        <img src="__IMG__/index/xuanfuzuo.png" alt="二维码" class="">
    </div>
    <div class="J_right_float" style="position: fixed;bottom:40px;overflow: hidden;">
        <ul class="quick-nav">
            <li class="qq"><a title="客服中心" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin={:C('GLOBAL_QQ')}&site=qq&menu=yes">
                &nbsp;</a></li>
            <li class="cart"><a href="{:U('Shop/ShoppingCart/index')}">&nbsp;</a></li>
            <li class="top"><a href="javascript:scroll(0,0)" TARGET="_self">&nbsp;</a></li>
        </ul>
    </div>

    <include file="desktop_default/width/floor" />
</block>

<block name="area_footer">
	<script type="text/javascript">
		$(function() {
            var left_logo = $(".logo").offset().left;
            console.log(left_logo);
			$(".div_time").each(function(){
				var until = $(this).data("until");
				until = parseInt(until);
				$(this).scojs_countdown({until: until});
			});
            $(".J_left_float").css("left",left_logo-140);
            $(".J_right_float").css("left",left_logo+990);

		});
	</script>

</block>